<template>
  <view class="tab-pane">
    <view @click="onTapItem(item, index)" v-for="(item, index) in props.tabs" class="item" :style="{ color: active == index ? '#5678F4' : '#666666' }" :key="index">
      <view> {{ item.label }} </view>
    </view>

    <view class="bg flex-center">
      <image :src="checkedBoxImg" mode="widthFix" style="width: 48rpx; height: 8rpx" />
    </view>
  </view>
</template>

<script setup lang="ts">
import checkedBoxImg from "@/static/images/common/checked_box.png";
import { Ref, ref } from "vue";
type tabsType = {
  label: string;
  value: number;
};
interface Props {
  /** tab */
  tabs: Array<tabsType>;
}
const props = withDefaults(defineProps<Props>(), {
  tabs: () => [
    { label: "item1", value: 0 },
    { label: "item2", value: 1 },
  ],
});

/** 背景移动 */
const active = ref(0);

const bgWidth: Ref<string> = ref("100%");

bgWidth.value = 100 / props.tabs.length + "%";

const bgLeft: Ref<string> = ref("0px");

/** emit点击事件 */
interface Emits {
  /** 点击tab项 */
  (e: "click-tab", value: any): void;
}

const emit = defineEmits<Emits>();

const onTapItem = (item: object, index: number) => {
  bgLeft.value = (100 / props.tabs.length) * index + "%";
  active.value = index;

  emit("click-tab", item);
};
</script>
<style lang="less" scoped>
.tab-pane {
  width: 100%;
  height: 60rpx;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  // box-sizing: border-box;
  background-color: transparent;
  padding: 10px 0;
  margin-top: -10px;

  .item {
    flex: 1;
    margin-left: 8px;
    margin-right: 8px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    font-size: 24rpx;
  }

  .bg {
    position: absolute;
    top: 30rpx;
    left: v-bind(bgLeft);
    width: v-bind(bgWidth);
    box-sizing: border-box;
    padding: 5px 8px;
    height: 100%;
    transition: all 0.5s;
  }
}
</style>
